<template>
	<view class="shop-cancel">
	  <div
	        class="cancel-header"
	        v-for="(item, index) in data.orderList"
	        :key="index"
	      >
	        <image
			style="width:28vw ;height: 28vw;border-radius: 2vw;"
	          :src="item.model.img"
	        />
	        <div class="cancel-header--info">
	          <div>{{ item.wares.name }}</div>
	          <div>{{ item.model.specificationsValue.replace(/"|{|}/g,"") }}</div>
	        </div>
	      </div>
	      <div class="cancel-main">
	        <van-cell
	          title="取消原因"
	          is-link
	          :value="textReason"
	          size="large"
	          @click="showPicker = true"
	        />
	        <van-cell size="large">
	          <template #title>
	            <span class="custom-title">订单金额</span>
	            <span style="color: #CC363C; margin-left:20px;font-weight: bold;">￥{{ data.needPay }}</span>
	          </template>
	        </van-cell>
	      </div>
		  <view class="fiexd-btn">
	      <u-button @click="cancelOrder" style="width: 80vw;" shape='circle' size="default" type="primary">提交申请</u-button>
		  </view>
	      <u-picker @confirm="chooseReason" title="选择取消原因" safe-area-inset-bottom v-model="showPicker" mode="selector" :range="columns" :default-selector="[0]"></u-picker>	
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	export default {
		data() {
			return {
				data: {},
				showPicker:false,
				columns:[],
				textReason:"",
				valueReason:""
			}
		},
		methods: {
			chooseReason(e){
				this.textReason=this.columns[e]
				this.valueReason=this.dictItems[e].value
			},
			cancelOrder(){
				if(this.textReason){
					api.SM_ORDER_CANCEL(JSON.stringify({id:this.data.orderId,cancelReason:this.valueReason})).then((res)=>{
						uni.navigateBack();
					})
				}
				else {
					uni.showToast({
						title:"请选择取消原因！",
						icon:"none",
						duration:1000,
					})
				}
			}
		},
		onLoad(e) {
		      this.data= typeof e !=="object"? JSON.parse(e) : e;
			api.SYS_DICT_GET_BY_CODES(JSON.stringify(["SM_ORDER_CANCEL_REASON"])).then((res)=>{
				this.dictItems=res.data.body[0].dictItems;
				res.data.body[0].dictItems.forEach((i)=>{
					this.columns.push(i.label)
				})
			})
		}
	}
</script>

<style lang='scss' scoped>
	.fiexd-btn{
		width: 100vw;
		position: fixed;
		bottom: 50rpx;
		right: 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
.shop-cancel {
  background: #f6f8fa;
  margin-top: 5vw;
  padding-bottom: 60px;
  .cancel-header {
    background: #fff;
    border-radius: 3vw;
    padding: 5vw;
    display: flex;
    & > div:last-child {
      width: 60vw;
      margin-left: 4vw;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      div {
        font-weight: bold;
      }
      div:first-child {
        color: #343434;
        font-size: 4vw;
      }
      div:last-child {
        color: #9a9a9a;
        font-size: 3.9vw;
      }
    }
  }
  .cancel-main {
    margin-top: 5vw;
    background: #fff;
  }
}
.address-add {
  background: #3b89ed;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 4.6vw;
}
</style>
